<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>视频导购</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/zepto.min.js"></script>
    <script type="text/javascript" src="../script/aui-slide.js"></script>
    <script type="text/javascript" src="../script/common.js"></script>
    <script type="text/javascript" src="../script/doT.min.js"></script>
    <style>
    #ulList , #ulList .group{
      display: flex;
      flex-wrap:wrap;
      align-items: center;
      justify-content: space-between;
    }
    #ulList li {
      padding: 5px;
      border-radius: 5px;
      width: 50%
    }
    #ulList li>div{
      border: 1px solid #ccc;
      border-radius: 5px;
      overflow: hidden;
    }
    .videoPlayer {
      width: 100%;
      position: relative;
    }

    .videoPlayer::after {
      position: absolute;
      content: ' ';
      width: 0;
      height: 0;
      margin: 50%;
      left: -0.5rem;
      top: -1rem;
      border: 20px solid transparent;
      border-left: 30px solid #ccc;
    }

    .videoPlayer::before {
        position: absolute;
        content: ' ';
        width: 3rem;
        height: 3rem;
        margin: 50%;
        left: -1.5rem;
        top: -1.5rem;
        border: 1px solid #ccc;
        border-radius: 50%;
    }

    #ulList .group_title{
        display: flex;
        align-items: flex-start;
        font-size: 14px;
        padding-left: 5px;
        margin-bottom: 5px;
    }
    #ulList .group_title>div{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    #ulList .group{
        padding: 0 5px;
        font-size: 10px;
        margin-bottom: 5px;
        color:#ccc;
    }
    #ulList .group .volume{
        padding: 0 5px;
        background: red;
        color:#fff;
        position: relative;
        overflow: hidden;
    }
    #ulList .group .volume::before{
        content: ' ';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        left: -2.5px;
        top:50%;
        margin-top: -2.5px
    }
    #ulList .group .volume::after{
        content: ' ';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        right: -2.5px;
        top:50%;
        margin-top: -2.5px
    }


    </style>
</head>

<body>
    <div class="aui-content aui-margin-b-15">
        <img src='../image/xiangqing04.png'>
        <ul id="ulList">

        </ul>
    </div>
</body>
<script type="text/javascript">
    apiready = function () {
        var data = api.pageParam.data,
            min_idVal = api.pageParam.min_idVal,
            cidVal = api.pageParam.cidVal,
            renderLi = doT.template($api.text($api.byId('templateLimit')));
        //console.log(JSON.stringify(cidVal), cidVal)

        //$api.html($api.byId('ulList'), '');
        for (var i = 0; i < data.length; i++) {
            data[i].item_id =  data[i].itemid
            data[i].is_tmall =  data[i].shoptype == 'B' ? '1' : '0'
        }

        $api.append($api.byId('ulList'), renderLi(data));

        api.addEventListener({
            name: 'scrolltobottom',
            extra: {
                threshold: 100 //设置距离底部多少距离时触发，默认值为0，数字类型
            }
        }, function (ret, err) {
            var urlTransform = window.urlTransformZGD(window.APIServerZGD.VideoGuide, {
                typeVal: '10', //类别
                backVal: '10', //分页条目
                min_idVal: min_idVal, //分页
                sortVal: '0',
                cidVal: cidVal
            })
            _Ajax(urlTransform, 'get', {}, 'json', function (ret) {
                if (ret.code === 1) {
                    var _data = ret.data

                    for (var i = 0; i < _data.length; i++) {
                        _data[i].item_id =  _data[i].itemid
                        _data[i].is_tmall =  _data[i].shoptype == 'B' ? '1' : '0'
                    }

                    $api.append($api.byId('ulList'), renderLi(_data));
                    min_idVal = ret.min_id
                } else {
                    console.log(JSON.stringify(ret.msg))
                }
            });
            console.log(urlTransform)
        });
    };

    function videoPlayer(videoid) {
        api.openVideo({
            url: 'http://cloud.video.taobao.com/play/u/1/p/1/e/6/t/1/' + videoid + '.mp4'
        });
    }
</script>
<script id="templateLimit" type="text/x-dot-template">
    {{ for (var key in it){ }}

    <li>
      <div>
        <div class='videoPlayer' onclick='videoPlayer({{= it[key]['videoid']  }})'>
          <img src={{= it[key]['itempic']+'_500x500.jpg' }}>
        </div>
        <div class='group_title' onclick='open_goods({{= JSON.stringify( it[key] ) }})'>
          {{= it[key]['shoptype'] == 'B' ? '<img src="../image/tmall.png" style="width:0.6rem;margin:5px;">':'<img src="../image/taobao.png" style="width:0.6rem;margin:5px;">' }}
          <div>{{= it[key]['itemtitle'] }}</div>
        </div>
        <div class='group'>
            <span>原价:<span style='text-decoration:line-through;'>¥{{= it[key]['itemprice'] }}</span></span>
            <span>{{= it[key]['itemsale'] }}人已买</span>
        </div>
        <div class='group'>
            <span style='color:red;'>¥<span style='font-size:14px;'>{{= it[key]['itemendprice'] }}</span></span>
            <span class='volume'>{{= it[key]['couponmoney'] }}元券</span>
        </div>
      </div>
    </li>

    {{ } }}
</script>

</html>
